// http://ionicframework.com/docs/theming/

/*************Font Awesome 字体图标*******************/
@import "../assets/libs/fontawesome/scss/fontawesome";
@import "../assets/libs/fontawesome/scss/fa-solid";
@import "../assets/libs/fontawesome/scss/fa-regular";
@import "../assets/libs/fontawesome/scss/fa-brands";
/****************************************************/

/*************Animate 动画****************************/
@import "../assets/libs/animate/animate";
.slideInDown{
  @include slideInDown(1,.3s);
}
.slideOutDown{
  @include slideInDown(1,.3s);
}
.slideInUp{
  @include slideInUp(1,.3s);
}
.slideOutUp{
  @include slideOutUp(1,.3s);
}
/****************************************************/
// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
//
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
//
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.

/*******公共样式START************/
html, h1, h2, h3, h4, h5, ul, li, p, div, body, span, dl, dt, dd, table, tr, td, i {
  margin: 0;
  padding: 0;
  font-style: normal;
}

ul, li {
  list-style: none;
}

a {
  text-decoration: none;
}

.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.f-flex-grow-1 {
  flex-grow: 1;
}

.f-flex-grow-2 {
  flex-grow: 2;
}

.f-flex-grow-3 {
  flex-grow: 3;
}

.f-flex-grow-4 {
  flex-grow: 4;
}

.f-flex-grow-5 {
  flex-grow: 5;
}

.flex-align-center {
  align-items: center;
}

.flex-line-center {
  justify-content: center;
}

.flex-align-end {
  align-items: flex-end;
}

.flex-align-start {
  align-items: flex-start;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-line-between {
  justify-content: space-between;
}

.flex-line-around {
  justify-content: space-around;
}

.flex-line-end {
  justify-content: flex-end;
}

.break-line-border {
  height: 5px;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  background: #f2f2f2;
}

.break-line {
  height: 5px;
  background: #f2f2f2;
}

.break-border-top {
  border-top: 1px solid #e6e6e6;
}

.break-border-left {
  border-left: 1px solid #e6e6e6;
}

.break-border-right {
  border-right: 1px solid #e6e6e6;
}

.break-border-bottom {
  border-bottom: 1px solid #e6e6e6;
}

.img-max-height {
  max-height: 100%;
  width: auto;
}

.img-max-width {
  max-width: 100%;
  height: auto;
}

.underline-link {
  text-decoration: underline;
}

.nowrap {
  white-space: nowrap;
}

.clearfix {
  clear: both;
}

.opacity-0 {
  opacity: 0;
}

.opacity-2 {
  opacity: .2;
}

.opacity-4 {
  opacity: .4;
}

.opacity-6 {
  opacity: .6;
}

.opacity-8 {
  opacity: .8;
}

.cover {
  width: 100%;
  height: 100%;
  display: block;
}

.bg-white {
  background: #fff;
}

.text-white {
  color: #fff;
}

.text-red {
  color: red;
}

.text-999 {
  color: #999;
}

.text-orange {
  color: #f29700;
}

.text-bold {
  font-weight: bold;
}

.text-tags {
  border: 1px solid #999;
  padding: .1rem .2rem;
  color: #999;
}

.badge-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  color: #fff;
  display: block;
  margin: 0 2px;
  font-size: 1.4rem;
}

.badge-enjoy {
  background: #f6ac00;
}

.badge-pledge {
  background: #e95704;
}

.badge-reward {
  background: red;
}

.margin-5 {
  margin: 5px;
}

.margin-right-5 {
  margin-right: 5px;
}

.margin-left-5 {
  margin-left: 5px;
}

.margin-top-5 {
  margin-top: 5px;
}

.margin-bottom-5 {
  margin-bottom: 5px;
}

.padding-5 {
  padding: 5px;
}

.padding-left-5 {
  padding-left: 5px;
}

.padding-right-5 {
  padding-right: 5px;
}

.padding-top-5 {
  padding-top: 5px;
}

.padding-bottom-5 {
  padding-bottom: 5px;
}

.width-auto {
  width: auto;
}

.height-auto {
  height: auto;
}

.img-20 {
  width: 20px;
  height: 20px;
}

.img-16 {
  width: 16px;
  height: 16px;
}

.img-14 {
  width: 14px;
  height: 14px;
}

.ion-tab-icon-base {
  width: 30px;
  height: 30px;
  padding: 0 1px 1px;
}

.ion-tab-icon-md-base {
  width: 30px;
  min-width: 30px !important;
  height: 30px;
}

$tabImageName: (home, commend, member);
@for $i from 1 to 4 {
  //for ios
  .ion-ios-icon-#{nth($tabImageName, $i)} {
    @extend .ion-tab-icon-base;
    content: url("../assets/icon/icon-#{nth($tabImageName, $i)}.png");
  }
  .ion-ios-icon-#{nth($tabImageName, $i)}-outline {
    @extend .ion-tab-icon-base;
    content: url("../assets/icon/icon-#{nth($tabImageName, $i)}-reverse.png");
  }

  // for android
  .tabs-md .tab-button[aria-selected=true] {
    .ion-md-icon-#{nth($tabImageName, $i)} {
      @extend .ion-tab-icon-md-base;
      content: url("../assets/icon/icon-#{nth($tabImageName, $i)}.png");
    }
  }
  .tabs-md .tab-button[aria-selected=false] {
    .ion-md-icon-#{nth($tabImageName, $i)} {
      @extend .ion-tab-icon-md-base;
      content: url("../assets/icon/icon-#{nth($tabImageName, $i)}-reverse.png");
    }
  }
}

.sub-nickname{
  width:9rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

ion-infinite-scroll{
  background:#fff;
}

.toolbar-md{min-height:50px;}

/********公共样式 END**********************/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul, li {
  list-style: none;
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow-y: auto;
}

body {
  overflow: hidden;
  font-size: 12px;
  color: #323232;
  background: #fff;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

a {
  text-decoration: none;
}
.copy {
  -webkit-user-select: text !important;
  user-select: text !important;
}
input, button, select, textarea {
  font-family: "苹方,微软雅黑, 宋体"
}

/*公共样式*/

/*内容开始*/
.ht-content {
  width: 100%;
  overflow: hidden;
  background: #fff;
}

/*高度*/
.ht-height {
  height: 100%;
}

/*宽度*/
.ht-100 {
  width: 100%;
}

.ht-95 {
  width: 95%;
}

.ht-90 {
  width: 90%;
}

.ht-85 {
  width: 85%;
}

.ht-80 {
  width: 80%;
}

.ht-78 {
  width: 78%;
}

.ht-75 {
  width: 75%;
}

.ht-70 {
  width: 70%;
}

.ht-66 {
  width: 66.666666%;
}

.ht-60 {
  width: 60%;
}

.ht-55 {
  width: 55%;
}

.ht-50 {
  width: 50%;
}

.ht-45 {
  width: 45%;
}

.ht-40 {
  width: 40%;
}

.ht-33 {
  width: 33.333333%;
}

.ht-30 {
  width: 30%;
}

.ht-35 {
  width: 35%;
}

.ht-25 {
  width: 25%;
}

.ht-22 {
  width: 22%;
}

.ht-20 {
  width: 20%;
}

.ht-16 {
  width: 16.66666%;
}

.ht-15 {
  width: 15%;
}

.ht-10 {
  width: 10%;
}

.ht-8 {
  width: 8%;
}

/*内边距*/
.ht-padding {
  padding: 10px;
}

.ht-padding-7 {
  padding: 7px 0;
}

.ht-padding-2015 {
  padding: 20px 15px;
}

.ht-padding-lr {
  padding: 0 10px;
}

.ht-padding-l5 {
  padding-left: 5px;
}

.ht-padding-10 {
  padding: 0 10px;
}

.ht-padding-5 {
  padding-left: 5%;
}

.ht-padding-15 {
  padding: 0 15px;
}

.ht-padding-2030 {
  padding: 20px 30px;
}

.ht-padding-tb {
  padding: 10px 0;
}

.ht-padding-bottom5 {
  padding-bottom: 5px;
}

.ht-padding-bottom10 {
  padding-bottom: 10px;
}

.ht-padding-bottom15 {
  padding-bottom: 15px;
}

.ht-padding-bottom20 {
  padding-bottom: 20px;
}

.ht-padding-top10 {
  padding-top: 10px;
}

.ht-overflow {
  overflow: hidden;
}

/*背景色*/
.ht-background {
  background: #fff;
}

.ht-f29603 {
  background: #f29603;
}

.ht-48aaee {
  background: #48aaee;
}

.ht-f1f1f1 {
  background: #f1f1f1;
}

.ht-af7ff5 {
  background: #af7ff5;
}

.ht-c9c9c9 {
  background: #c9c9c9;
}

/**/
.ht-border {
  border: 1px solid #e3e3e3;
}

.ht-border-bottom {
  border-bottom: 1px solid #e3e3e3;
}

.ht-border-f29603 {
  border-bottom: 2px solid #f29603;
}

.ht-border-top {
  border-top: 1px solid #e3e3e3;
}

.ht-border-right {
  border-right: 1px solid #e3e3e3;
}

/*浮动*/
.ht-float-left {
  float: left;
}

.ht-float-right {
  float: right;
}

/*字体*/
.ht-ff4b3d {
  color: #ff4b3d;
}

.ht-44ce57 {
  color: #44ce57;
}

.ht-bold {
  font-weight: bold;
}

.ht-font-38 {
  font-size: 38px;
}

.ht-font-30 {
  font-size: 30px;
}

.ht-font-28 {
  font-size: 28px;
}

.ht-font-26 {
  font-size: 26px;
}

.ht-font-24 {
  font-size: 24px;
}

.ht-font-22 {
  font-size: 22px;
}

.ht-font-20 {
  font-size: 20px;
}

.ht-font-18 {
  font-size: 18px;
}

.ht-font-16 {
  font-size: 16px;
}

.ht-font-15 {
  font-size: 15px;
}

.ht-font-14 {
  font-size: 14px;
}

.ht-font-13 {
  font-size: 13px;
}

.ht-font-12 {
  font-size: 12px;
}

/*字体颜色*/
.ht-fff {
  color: #fff;
}

.ht-333 {
  color: #333;
}

.ht-000 {
  color: #000;
}

.ht-font-f29603 {
  color: #f29603;
}

.ht-d32d25 {
  color: #d32d25
}

.ht-999 {
  color: #999;
}

.ht-888 {
  color: #888;
}

.ht-555 {
  color: #555;
}

.ht-666 {
  color: #666;
}

.ht-fb2321 {
  color: #fb2321;
}

.ht-color-48aaee {
  color: #48aaee;
}

.ht-599eba {
  color: #599eba;
}

/*块元素*/
.ht-inline-block {
  display: inline-block;
}

.ht-block {
  display: block;
}

/*字体居中*/
.ht-text-center {
  text-align: center;
}

.ht-text-left {
  text-align: left;
}

.ht-text-right {
  text-align: right;
}

/*超出部分隐藏*/
.ht-yc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*定位*/
.ht-absolute {
  position: absolute;
}

.ht-relative {
  position: relative;
}

.ht-fixed {
  position: fixed;
}

.ht-margin-top10 {
  margin-top: 10px;
}

.ht-margin-top20 {
  margin-top: 20px;
}

.ht-margin-top15 {
  margin-top: 15px;
}

.ht-margin-bottom {
  margin-bottom: 5px;
}

.ht-margin-lr {
  margin: 0 5px;
}

.ht-weight {
  font-weight: bold;
}

.ht-align {
  text-align: justify;
  text-justify: inter-ideograph;
}

.ht-none {
  display: none;
}

.ht-ycc {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

.ht-bottom {
  bottom: -200px;
}

.ht-radius-30 {
  border-radius: 30px;
}

.ht-radius-10 {
  border-radius: 10px;
}

.ht-border-radius {
  border-radius: 5px;
}

.ht-radius-50 {
  border-radius: 50%;
}

.ht-z-index {
  z-index: 9999999;
}

/*圆*/
.ht-circle-60 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.ht-circle-100 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.ht-circle-20 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

/*垂直居中*/
.ht-line-20 {
  line-height: 20px;
}

.ht-line-25 {
  line-height: 25px;
}

.ht-line-30 {
  line-height: 30px;
}

.ht-line-35 {
  line-height: 35px;
}

.ht-line-40 {
  line-height: 40px;
}

.ht-line-45 {
  line-height: 45px;
}

.ht-line-50 {
  line-height: 50px;
}

.ht-line-55 {
  line-height: 55px;
}

.ht-line-60 {
  line-height: 60px;
}

.ht-auto {
  margin: 0 auto;
}

.ht-img {
  width: 20px;
  height: 20px;
  float: left;
  display: block;
}

.ht-span {
  float: left;
  margin-left: 7px;
  display: inline-block;
}

.ht-bq {
  padding: 0 2px;
  border: 1px solid #e3e3e3;
  color: #999;
}

.bar-button-ios {
  font-size: 16px;
}

// 搜索框安卓样式
.searchbar-md {
  padding: 0;
}

.searchbar-md .searchbar-input {
  padding: 0 0 0 30px;
  border: 0;
  height: 25px;
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0), 0 0px 0px 0px rgba(0, 0, 0, 0), 0 0px 0px 0 rgba(0, 0, 0, 0);
}

.searchbar-md .searchbar-search-icon {
  left: 5px;
  top: 2px;
}